<template>
	<div>


		<a-card :borderd="false" class="mb-2">
			<a-row>
				<a-col :span="2">
					<a-space>
						<div style="text-align: center;line-height:48px;font-size:24px">{{ group.name }}安全组</div>
						<div style="text-align: center;font-size:14px; color: #606266">{{ group.description }}</div>
					</a-space>
				</a-col>
			</a-row>
		</a-card>

		<a-card :borderd="false" class="mb-2">
			<a-row :gutter="8">
				<a-col :span="2">
					<a-input v-model:="config.listQuery.name" placeholder="请输入名称"/>
				</a-col>
				<a-col :span="2">
					<el-input v-model:value="config.listQuery.description" placeholder="请输入描述"/>
				</a-col>
				<a-col :span="2">
					<a-select v-model:value="config.listQuery.enable" placeholder="请选择启用状态" allow-clear
							  style="width:100%">
						<a-select-option v-for="item in config.selectObj.statusOptions" :key="item.value"
										 :value="item.value">{{ item.label }}
						</a-select-option>
					</a-select>
				</a-col>

				<a-col :span="12">
					<a-space>
						<a-button @click="tableRef.refresh()">
							搜索
						</a-button>
						<a-button @click="handleCreate" type="primary">新增
						</a-button>
					</a-space>
				</a-col>
			</a-row>
		</a-card>

		<a-card>
			<h-table :paged="true" ref="tableRef" :data="getList" :columns="columns">
			</h-table>

		</a-card>


		<a-modal v-model:open="config.dialogFormVisible" :destroyOnClose="true" :width="1000" :closable="false"
				 @cancel="config.dialogFormVisible = false" @ok="saveData">
			<a-form :rules="config.rules" ref="dataForm" :model="config.temp">
				<a-form-item label="名称" name="name">
					<a-input placeholder="名称" v-model:value="config.temp.name"></a-input>
				</a-form-item>

				<a-form-item label="描述" name="desc">
					<a-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="描述"
							 v-model:value="config.temp.description"></a-input>
				</a-form-item>

				<a-form-item label="规则" name="rule">
					<a-input type="textarea" :autosize="{ minRows: 4, maxRows: 10 }" placeholder="规则"
							 v-model:value="config.temp.rule"></a-input>
				</a-form-item>
				<a-form-item>
					<div style="line-height: 28px; color: cornflowerblue">
						<div>规则描述:</div>
						<div>单个ip：192.168.1.1, AA22:BB11:1122:CDEF:1234:AA99:7654:7410, ipv6只支持单个ip判断</div>
						<div>范围类型：192.168.1.0-192.168.1.255</div>
						<div>掩码类型：192.168.1.0/24</div>
						<div>泛型：0.0.0.0/ALL</div>
						<div>每个类型中间以英文逗号分隔,形如 192.168.1.1,192.168.3.0/24 是正确的</div>
					</div>
				</a-form-item>


				<a-form-item label="通过类型" name="passType">
					<a-tooltip :content="config.temp.passTypeTooltip" placement="right">
						<a-select v-model:value="config.temp.passType">
							<a-select-option v-for="item in config.passTypeList" :key="item.key"
											 :value="item.value">
								{{ item.key }}
							</a-select-option>
						</a-select>
					</a-tooltip>
				</a-form-item>

				<!-- <el-form-item :label="$t('table.priority')" prop="priority">
			<el-input-number v-model="temp.priority" :min="1" :max="1000" :placeholder="$t('table.priority')"></el-input-number>
		  </el-form-item> -->

			</a-form>
		</a-modal>

		<a-modal v-model:open="config.dialogPvVisible" :destroyOnClose="true" :width="1000" :closable="false"
				 @cancel="config.dialogPvVisible = false" @ok="config.dialogPvVisible = false">
			<el-table :data="config.pvData" border fit highlight-current-row style="width: 100%">
				<el-table-column prop="key" label="Channel"></el-table-column>
				<el-table-column prop="pv" label="Pv"></el-table-column>
			</el-table>
		</a-modal>
	</div>
</template>

<script setup>
import securityGroupApi from '@/api/securityGroup/securityGroupApi.js'
import securityRuleApi from '@/api/securityGroup/securityRuleApi.js'
import {message} from 'ant-design-vue'

const tableRef = ref()
const dataForm = ref()

const config = ref({
	groupId: 1,
	group: {},
	tableKey: 0,
	list: [],
	total: null,
	listQuery: {
		groupId: undefined,
		name: undefined,
		description: undefined,
		passType: undefined,
		enable: undefined
	},
	listLoading: true,
	temp: {
		id: undefined,
		groupId: undefined,
		name: '',
		description: '',
		rule: '',
		passType: undefined,
		passTypeTooltip: '',
		priority: 1
	},
	selectObj: {
		statusOptions: [{label: '启用', value: 1}, {label: '禁用', value: 2}],
		onlineOptions: [{label: '在线', value: 1}, {label: '离线', value: 2}],
		passType: [{label: '允许', value: 1}, {label: '拒绝', value: 2}]

	},
	dialogFormVisible: false,
	dialogStatus: '',
	textMap: {
		update: '编辑',
		create: '新建'
	},
	passTypeList: [{key: '允许', value: 1}, {key: '拒绝', value: 0}],
	dialogPvVisible: false,
	pvData: [],
	rules: {
		name: [{required: true, message: '安全组名称必填', trigger: 'blur'}],
		rule: [{required: true, message: '规则内容必填', trigger: 'blur'}],
		// passType: [{ required: true, message: '放行类型必选', trigger: 'blur' }],
		// priority: [{ required: true, message: '优先级必填', trigger: 'blur' }]
	},
	downloadLoading: false,
	checkBoxData: [], //表单勾选的行
})

const columns  = ref([
	{
		title: 'id',
		key: 'id',
		dataIndex: 'id',
		ellipsis: true,
	},
	{
		title: '规则名称',
		key: 'name',
		dataIndex: 'name',
		ellipsis: true,
	},
	{
		title: '描述',
		key: 'description',
		dataIndex: 'description',
		ellipsis: true,
	},
	{
		title: '规则',
		key: 'rule',
		dataIndex: 'rule',
		ellipsis: true,
	},
	{
		title: '放行类型',
		key: 'passType',
		dataIndex: 'passType',
		ellipsis: true,
		mapping: [
			{
				key: '1',
				value: 'success'
			},
			{
				key: '0',
				value: 'danger'
			}
		]
	},
	{
		title: '创建时间',
		key: 'createTime',
		dataIndex: 'createTime',
		ellipsis: true,
	},
	{
		title: '修改时间',
		key: 'updateTime',
		dataIndex: 'updateTime',
		ellipsis: true,
	},
	{
		title: '启停状态',
		key: 'enable',
		dataIndex: 'enable',
		ellipsis: true,
		mapping: [
			{
				key: '1',
				value: '启用'
			},
			{
				key: '2',
				value: '停用'
			}
		]
	},
	{
		title: '操作',
		dataIndex: 'action',
		key: 'action',
		width: 260,
		fixed: 'right',
		buttonList: [
			{
				type: "primary",
				click: (field, record) => {
					handleUpdate(record)
				},
				render: (record) => {
					return "编辑";
				}
			},
			{
				click: (field, record) => {
					handleModifyStatus(record, record.enable == 1 ? 2 : 1);
				},
				render: (record) => {
					return record.enable == 1 ? "停用" : "启用";
				}
			},

			{
				click: (field, record) => {
					handleDelete(record)
				},
				render: (record) => {
					return "删除";
				}
			}
		]
	}
])
const saveData = async () => {
	let b = await dataForm.value.validate();
	if (!b) {
		return
	}
	if (config.value.dialogStatus == 'create') {
		await createData();
	} else {
		await updateData();
	}

}

const {proxy} = getCurrentInstance()

onMounted(() => {
	// eslint-disable-next-line no-sequences

	if (proxy.$route.query.groupId) {
		config.value.listQuery.groupId = proxy.$route.query.groupId
	} else {
		message.error('没有获取到安全组信息')
		proxy.$router.push(`/proxy/securityGroup/index`)
		return
	}
	getGroupDetail()
	getList()

})

const getGroupDetail = async () => {
	let response = await securityGroupApi.fetchGroupDetail({id: config.value.listQuery.groupId});
	config.value.group = response
}
const getList =
	async () => {
		if (!config.value.listQuery.groupId) {
			config.value.listQuery.groupId = proxy.$route.query.groupId
			return
		}
		if (!config.value.listQuery.groupId) {
			message.error('没有获取到安全组信息')
			return
		}
		let response = await securityRuleApi.fetchRulePage(config.value.listQuery);
		return response;
	}

const handleModifyStatus =
	async (row, enable) => {
		await securityRuleApi.updateRuleEnableStatus(row.id, enable);
		tableRef.value.refresh()
	}
const resetTemp =
	() => {
		config.value.temp = {
			id: undefined,
			groupId: config.value.listQuery.groupId,
			name: '',
			description: '',
			rule: '',
			passType: config.value.group.defaultPassType == 1 ? 0 : 1,
			passTypeTooltip: `安全组已设置默认${(config.value.group.defaultPassType == 1 ? '允许' : '拒绝')}`,
			priority: 1
		}
	}
const handleCreate =
	() => {
		resetTemp()
		config.value.dialogStatus = 'create'
		config.value.dialogFormVisible = true
		dataForm.value.clearValidate()
	}
const createData = async () => {
	config.value.temp.groupId = config.value.listQuery.groupId
	await securityRuleApi.createRule(config.value.temp);
	config.value.dialogFormVisible = false
	tableRef.value.refresh()
}
const handleUpdate =
	(row) => {
		config.value.temp = Object.assign({}, row) // copy obj
		config.value.temp.passType = row.passType
		config.value.temp.passTypeTooltip = `安全组已设置默认${(config.value.group.defaultPassType == 1 ? '允许' : '拒绝')}`,
			config.value.temp.timestamp = new Date(config.value.temp.timestamp)
		config.value.dialogStatus = 'update'
		config.value.dialogFormVisible = true
		dataForm.value.clearValidate()
	}
const updateData =
	async () => {
		const tempData = Object.assign({}, config.value.temp)
		tempData.groupId = config.value.listQuery.groupId
		await securityRuleApi.updateRule(tempData);
		config.value.dialogFormVisible = false
		tableRef.value.refresh()
	}
const handleDelete = async (row) => {
		await securityRuleApi.deleteRule({ruleId: row.id});
		tableRef.value.refresh()
	}
</script>
